<template>
    <Header />

    <!-- 手机端 -->
    <div class="exhibition-container-phone hidden-sm-and-up">
        <div class="ex-info-container">
            <div class="ex-title">
                酒店详情
            </div>
        </div>
        <div class="hotelIntro">
            <div class="intro-title">
                酒店信息
            </div>

            <div class="intro-content">
                <div class="intro-box">
                    <div class="second-title">基本信息：</div>
                    <div class="content-container">
                        <div class="content-item">
                            酒店电话：123456789
                        </div>
                        <div class="content-item">
                            开业年份：2019
                        </div>
                        <div class="content-item">
                            客房数：100
                        </div>
                    </div>

                </div>
                <div class="intro-box">
                    <div class="second-title">酒店介绍：</div>
                    <div class="content-container">
                        <div class="content-item">
                            深圳国际会展中心希尔顿酒店位于深圳市宝安区福海街道的会展新城片区，紧邻亚太区综合性会展中心 —— 深圳国际会展中心，通过空中连廊步行可达。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hotelIntro">
            <div class="intro-title">
                周边设施
            </div>

            <div class="intro-content">
                <div class="intro-box">
                    <div class="second-title">交通：</div>
                    <div class="content-container">
                        <div class="content-item">虹桥国际机场</div>
                        <div class="content-item">虹桥国际机场</div>
                    </div>

                </div>
            </div>
        </div>
        <div class="hotelIntro">
            <div class="intro-title">
                酒店政策
            </div>

            <div class="intro-content">
                <div class="intro-box">
                    <div class="second-title">入住需知：</div>
                    <div class="content-container">
                        <div class="content-item">1.入住时间：15:00 以后</div>
                        <div class="content-item">2.离店时间：12:00 以前</div>
                        
                    </div>
                    

                </div>
            </div>
        </div>
    </div>
    <!-- PC端 -->
    <div class="exhibition-container hidden-xs-only">
        <div class="ex-info-container">
            <div class="ex-title">
                酒店详情
            </div>
        </div>
        <div class="hotelIntro">
            <div class="intro-title">
                酒店信息
            </div>

            <div class="intro-content">
                <div class="intro-box">
                    <div class="second-title">基本信息：</div>
                    <div class="content-container">
                        <div class="content-item">
                            酒店电话：123456789
                        </div>
                        <div class="content-item">
                            开业年份：2019
                        </div>
                        <div class="content-item">
                            客房数：100
                        </div>
                    </div>

                </div>
                <div class="intro-box">
                    <div class="second-title">酒店介绍：</div>
                    <div class="content-container">
                        <div class="content-item">
                            深圳国际会展中心希尔顿酒店位于深圳市宝安区福海街道的会展新城片区，紧邻亚太区综合性会展中心 —— 深圳国际会展中心，通过空中连廊步行可达。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="hotelIntro">
            <div class="intro-title">
                周边设施
            </div>

            <div class="intro-content">
                <div class="intro-box">
                    <div class="second-title">交通：</div>
                    <div class="content-container">
                        <div class="content-item">虹桥国际机场</div>
                        <div class="content-item">虹桥国际机场</div>
                    </div>

                </div>
            </div>
        </div>
        <div class="hotelIntro">
            <div class="intro-title">
                酒店政策
            </div>

            <div class="intro-content">
                <div class="intro-box">
                    <div class="second-title">入住需知：</div>
                    <div class="content-container">
                        <div class="content-item">1.入住时间：15:00 以后</div>
                        <div class="content-item">2.离店时间：12:00 以前</div>
                        
                    </div>
                    

                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import Header from '@/components/Header.vue'
    import { ref } from 'vue'
    import phoneHotel from '@/components/phoneHotel.vue'
    const hotelRate = ref(3.7)

    const hotelStar = ref(4)
    const phoneRate = ref(4)
    const hotelIntime = ref('')

    const phoneHotelIntimeStart = ref('')
    const phoneHotelIntimeEnd = ref('')
    // 轮播图list
    const swiperList = [
        {
            id: 1,
            src: '../static/s1.jpg'
        },
        {
            id: 2,
            src: '../static/s2.jpg'
        },
        {
            id: 3,
            src: '../static/s3.jpg'
        },
        {
            id: 4,
            src: '../static/image.png'
        }
    ]
</script>

<style lang="scss" scoped>
    @import '@/assets/variables.scss';

    .exhibition-container-phone {
        padding: 20px;
        max-width: $primary-max-width;
        margin: 0 auto;

        .el-rate {
            --el-rate-icon-size: 32px !important;
        }

        .ex-info-container {


            .ex-title {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 20px;
            }


        }

        .hotelIntro {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            font-size: 14px;
            .intro-title {
                min-width: 100px;
                font-weight: 700;
            }
            .intro-content{
                width: 100%;
            }
            .intro-box{
                margin-bottom: 40px;
                display: flex;
                .content-container{
                    color: #666666;
                    display: flex;
                    /* justify-content: space-around; */
                    flex-wrap: wrap;
                    .content-item{
                        /* margin-right: 40px; */
                    }
                }
            }
            .second-title {
                min-width: 100px;
                color: #817F7F;
            }
        }
    }

    .exhibition-container {
        padding: 20px;
        max-width: $primary-max-width;
        margin: 0 auto;

        .el-rate {
            --el-rate-icon-size: 32px !important;
        }

        .ex-info-container {


            .ex-title {
                font-size: 28px;
                font-weight: 600;
                margin-bottom: 20px;
            }


        }

        .hotelIntro {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            .intro-title {
                min-width: 100px;
                font-weight: 700;
            }
            .intro-content{
                width: 100%;
            }
            .intro-box{
                margin-bottom: 40px;
                display: flex;
                .content-container{
                    color: #666666;
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;
                    .content-item{
                        margin-right: 40px;
                    }
                }
            }
            .second-title {
                min-width: 200px;
                color: #817F7F;
            }
        }
    }
</style>